I have two spinner and a square imageview . I have set the weight for fixing the layout so that in every screen the ratio is same in all screen like small,normal, large and xlarge. I have discarded the small. The image is given below :
enter image description here
I have used the run time layout weight as like this :
private void initfixview()
{
LinearLayout.LayoutParams lnrspnrviewlayoutparams= (LinearLayout.LayoutParams)lnrspnrview.getLayoutParams();
LinearLayout.LayoutParams lnrimageviewlayoutparams= (LinearLayout.LayoutParams)lnrimageview.getLayoutParams();
LinearLayout.LayoutParams lnrdummyspacelayoutparams= (LinearLayout.LayoutParams)lnrdummyspace.getLayoutParams();
LinearLayout.LayoutParams lnrimgarrowupdownlayoutparams= (LinearLayout.LayoutParams)lnrimgarrowupdown.getLayoutParams();
LinearLayout.LayoutParams lnrcountrystatelayoutparams= (LinearLayout.LayoutParams)lnrcountrystate.getLayoutParams();
LinearLayout.LayoutParams lnrzipcodelayoutparams= (LinearLayout.LayoutParams)lnrzipcode.getLayoutParams();
if ((getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_LARGE)
{
lnrspnrviewlayoutparams.weight=80;
lnrspnrviewlayoutparams.width=80;
lnrimageviewlayoutparams.weight=20;
lnrimageviewlayoutparams.width=20;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=80;
lnrdummyspacelayoutparams.width=80;
lnrimgarrowupdownlayoutparams.weight=20;
lnrimgarrowupdownlayoutparams.width=20;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=80;
lnrcountrystatelayoutparams.width=80;
lnrzipcodelayoutparams.weight=20;
lnrzipcodelayoutparams.width=20;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
else if ((getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_NORMAL)
{
lnrspnrviewlayoutparams.weight=70;
lnrspnrviewlayoutparams.width=70;
lnrimageviewlayoutparams.weight=30;
lnrimageviewlayoutparams.width=30;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=70;
lnrdummyspacelayoutparams.width=70;
lnrimgarrowupdownlayoutparams.weight=30;
lnrimgarrowupdownlayoutparams.width=30;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=70;
lnrcountrystatelayoutparams.width=70;
lnrzipcodelayoutparams.weight=30;
lnrzipcodelayoutparams.width=30;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
else if ((getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_XLARGE)
{
lnrspnrviewlayoutparams.weight=85;
lnrspnrviewlayoutparams.width=85;
lnrimageviewlayoutparams.weight=15;
lnrimageviewlayoutparams.width=15;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=85;
lnrdummyspacelayoutparams.width=85;
lnrimgarrowupdownlayoutparams.weight=15;
lnrimgarrowupdownlayoutparams.width=15;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=85;
lnrcountrystatelayoutparams.width=85;
lnrzipcodelayoutparams.weight=15;
lnrzipcodelayoutparams.width=15;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
else
{
lnrspnrviewlayoutparams.weight=70;
lnrspnrviewlayoutparams.width=70;
lnrimageviewlayoutparams.weight=30;
lnrimageviewlayoutparams.width=30;
lnrspnrview.setLayoutParams(lnrspnrviewlayoutparams);
lnrimageview.setLayoutParams(lnrimageviewlayoutparams);
lnrdummyspacelayoutparams.weight=70;
lnrdummyspacelayoutparams.width=70;
lnrimgarrowupdownlayoutparams.weight=30;
lnrimgarrowupdownlayoutparams.width=30;
lnrdummyspace.setLayoutParams(lnrspnrviewlayoutparams);
lnrimgarrowupdown.setLayoutParams(lnrimageviewlayoutparams);
lnrcountrystatelayoutparams.weight=70;
lnrcountrystatelayoutparams.width=70;
lnrzipcodelayoutparams.weight=30;
lnrzipcodelayoutparams.width=30;
lnrcountrystate.setLayoutParams(lnrspnrviewlayoutparams);
lnrzipcode.setLayoutParams(lnrimageviewlayoutparams);
}
edtcompanyname.setHint(Html.fromHtml(getString(R.string.namecompany)));
edtusertelephone.setHint(Html.fromHtml(getString(R.string.telephone)));
}
Now in devices its working fine but in some devices the ratio isnt maintained like normal devices with small size.
I have tried every possible solutions like smallest width, density factor and creating multiple layouts for the same:
The issued image is given below:
enter image description here
The code for my layout is given below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginEnd="#dimen/pleaseselectonemarginstart"
android:layout_marginLeft="#dimen/pleaseselectonemarginstart"
android:layout_marginRight="#dimen/pleaseselectonemarginstart"
android:layout_marginStart="#dimen/pleaseselectonemarginstart"
android:layout_marginTop="10dp"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:id="#+id/lnrspnrview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="70"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#drawable/shadow_white_normal"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<Spinner
android:id="#+id/spnrcountry"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/sfdmedium"
android:gravity="center|left"
android:hint="#string/telephone"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:textColor="#color/edtcolor"
android:textColorHint="#color/hintcolor"
android:textSize="#dimen/textsize" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/shadow_white_normal"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<Spinner
android:id="#+id/spnrbusinesscategory"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/sfdmedium"
android:gravity="center|left"
android:hint="#string/telephone"
android:paddingLeft="10dp"
android:paddingStart="10dp"
android:textColor="#color/edtcolor"
android:textColorHint="#color/hintcolor"
android:textSize="#dimen/textsize" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/lnrimageview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_weight="30"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<custom.SquareImageView
android:id="#+id/edtuploadimage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:gravity="center"
android:scaleType="fitXY"
android:src="#drawable/shadow_logo" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clickable="true"
android:fontFamily="#font/sfdmedium"
android:gravity="center"
android:text="#string/uploadlogo"
android:textColor="#color/hintcolor"
android:textSize="#dimen/lessertextsize" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I will be very glad here any possible solution. As I have every solution to this problem from creating multiple layout and smallest width and others.
If you set the weight in xml you don't need to change at run time based on device screen, it will preserve the same ratio for all screens. I have made some correction to you layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/lnrspnrview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Spinner
android:id="#+id/spnrcountry"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Spinner
android:id="#+id/spnrbusinesscategory"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4">
<custom.SquareImageView
android:id="#+id/edtuploadimage"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center" />
</RelativeLayout>
Here i just give the hint how the structure of your layout should've look like. If you follow this, then you do not need to change the weight programatically based on device screen because it will be same for all.
Related
I have test on two phones.
Moto G5s
Mi note 7 pro
My UI is look perfect on Moto g5s
but on Mi note 7 pro it's look small font size.
I have attached screenshots of both phones.
Moto G5s: http://prntscr.com/nw9rhi
Note 7 pro: http://prntscr.com/nw9r4y
Actual UI: http://prntscr.com/nw9rvv
What I expected It looks same on all device.
This is my layout. I have a viewpager.So created Item layout for Text.When Swipe it.It change text like this.
I want like this. I have issue only on design on different phones.
http://prntscr.com/nw9u1j
//TourLayout.axml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/tourbg"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:id="#+id/imageView" />
<LinearLayout
android:layout_width="match_parent"
android:weightSum="1"
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.24"
android:layout_height="0dp">
<RelativeLayout
android:id="#+id/welcomeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<JammberSplits.Droid.Views.PieView
android:layout_height="#dimen/margin_90"
android:id="#+id/pieView"
android:layout_marginLeft="#dimen/margin_30"
android:layout_marginTop="#dimen/margin_10"
android:layout_width="#dimen/margin_90">
</JammberSplits.Droid.Views.PieView>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.56"
android:layout_height="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/LoginCenterLayout">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp">
<RelativeLayout
android:id="#+id/SignUpLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true">
<LinearLayout
android:id="#+id/viewPagerCountDots"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/margin_05"
android:layout_above="#+id/btnNext"
android:layout_centerHorizontal="true"
android:gravity="center"
android:orientation="horizontal" />
<Button
android:layout_width="wrap_content"
android:layout_height="#dimen/margin_40"
android:text="Next"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginBottom="#dimen/margin_20"
android:layout_alignParentBottom="true"
android:id="#+id/btnNext"
android:textColor="#color/colorWhite"
android:textSize="#dimen/textSize_15"
android:background="#drawable/button_transparen"
app:fontFamily="#font/lato_light"
android:paddingLeft="#dimen/margin_50"
android:paddingRight="#dimen/margin_50"
android:layout_centerHorizontal="true"
android:inputType="none|textCapWords" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
//TourItemLayout.axml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_centerVertical="true"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SONG"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:id="#+id/lblTourWizFirstLine"
android:layout_marginRight="#dimen/margin_38"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SPLITS"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginRight="#dimen/margin_38"
android:layout_marginTop="#dimen/margin_20_minus"
android:id="#+id/lblTourWizSecondLine"
android:layout_below="#+id/lblTourWizFirstLine"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="MADE"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginRight="#dimen/margin_38"
android:layout_marginTop="#dimen/margin_20_minus"
android:id="#+id/lblTourWizThirdLine"
android:layout_below="#+id/lblTourWizSecondLine"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EASY"
android:lines="1"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginRight="#dimen/margin_38"
android:layout_marginTop="#dimen/margin_20_minus"
android:id="#+id/lblTourWizFourthLine"
android:layout_below="#+id/lblTourWizThirdLine"
app:fontFamily="#font/lato_bold"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:textSize="#dimen/textSize_73"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Invite your co-writers\nto collaborate on a\nnew project"
android:layout_marginTop="#dimen/margin_70"
android:lines="3"
android:maxLines="3"
android:ellipsize="end"
android:id="#+id/lblDescriptionText"
android:layout_below="#+id/lblTourWizThirdLine"
app:fontFamily="#font/lato_regular"
android:textColor="#color/colorWhite"
android:layout_marginLeft="#dimen/margin_38"
android:layout_marginRight="#dimen/margin_85"
android:textSize="#dimen/textSize_18"/>
<!--<ImageView android:id="#+id/TextTour"
android:src="#drawable/tour1text"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/margin_38"
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>-->
</RelativeLayout>
</RelativeLayout>
There are a lot of ways to achieve such a behavior. For example, you may define dimens resources for a different phones with smallest width qualifiers.
https://developer.android.com/training/multiscreen/screensizes
Inorder to support multiple devices and multiple screen support , there are different options available.
1) You can create different dimens file,dimens.xml(small,normal,large,xlarge) inside res->values folder.
2) Provide different xml files for different screen sizes. (Not preferable)
3) Use Constraint Layouts.
According to your description, you want to support different screen size, I find one article that you can take a look:
1.Declare the screen size the application supports
2.Layouts for different screen sizes
https://www.c-sharpcorner.com/article/xamarin-android-create-android-app-supporting-multiple-screens/
As part of the on-boarding for my app, I have a series of translucent overlays that highlight the UI. Each one is a LinearLayout, initially invisible (actually "gone"), that I make visible in turn. I am having a very tough time getting one of these to display correctly on both tablets and phones, in both portrait and landscape. I can tune it to work on the phone, but then it doesn't display well on tablet-portrait.
The images here are set up to work well on 10" tablets in portrait, and they work for 7" tablets and phones in portrait, but not in landscape. In the images below, I would like the arrows (two ImageViews) to resize as needed to make room for the text. However, the Layout seems to give priority to the ImageViews no matter what I do.
(Note that I do realize I could make this work, in a way, with a RelativeLayout, however, I cannot get the translucent backgrounds to work, filling the screen, using a RelativeLayout, as far as I know.)
My question in brief: Is there a way to make LinearLayout prioritize the TextViews, giving them enough space, and resizing the ImageViews to fit the rest?
Here is a good layout (10" tablet, portrait, shown at reduced scale):
Here is a bad one with some of the text cut off (10" tablet, landscape, reduced scale):
Here is another bad one (phone):
I don't have a screenshot of the other tuning, but it displayed big arrows and no central "Tap to Continue" button.
Here is my current XML:
<RelativeLayout
android:id="#+id/main_holder"
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">
<LinearLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<LinearLayout
android:id="#+id/intro3_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top|center_horizontal"
android:orientation="vertical"
android:gravity="top|center_horizontal">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:layout_gravity="center_horizontal|top"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_weight="0"
android:background="#85000000"
android:gravity="center">
<TextView
android:id="#+id/button_intro3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/intro3_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="bottom|center_horizontal"
android:gravity="bottom|center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_weight="1"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:layout_gravity="center_horizontal|bottom"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
There're several possible way of doing it. I've updated your layout a bit, so now it should meet your expectations:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/main_holder"
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">
<RelativeLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:gravity="center"
android:layout_alignParentTop="true"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button_intro3"
android:layout_below="#+id/textViewIntro3_1"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
<TextView
android:id="#+id/button_intro3"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_below="#+id/button_intro3"
android:layout_above="#+id/textViewIntro3_2"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:gravity="center"
android:layout_alignParentBottom="true"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</RelativeLayout>
</RelativeLayout>
What I did here is to rewrite the layout with RelativeLayout instead of LinearLayouts. It suits better here, in my humble opinion.
I hope, it helps.
I have an layout with a background that already made for host my app's image buttons. my image buttons are in a row of middle in this layout. my emulator is 480*800 px hdpi that dp is:320*533.
when i adjust buttons from xml, everything is OK. but when run, my buttons change smaller than from size of in xml and layout is not ordered. please help me. what can i do?
myt xml code for this layout is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_panel"
>
</ScrollView>
<LinearLayout
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingBottom="75dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/help_ic"
android:src="#drawable/help_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/feed_ic"
android:src="#drawable/feed_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/search_ic"
android:src="#drawable/search_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/read_ic"
android:src="#drawable/read_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
android:paddingBottom="0dp" />
</LinearLayout>
As you have given weight to your ImageView,set
android:layout_width="0dp"
instead of "wrap_content" for the ImageView and give the total weightsum to the parent LinearLayout i.e 4 in your case.
Try this, I hope It will help you.
I'm trying to have a HorizontalScrollView with 8 buttons which I can code fine. But I want to have the layout double the width of the screen so there are 4 buttons on the screen and the user has to scroll to see more (I'm don't want a "snap" scroll).
To do this I've manually change the width of the HorizontalScrollView to say "770dp" but whenever I specify the width it looks correct but does not scroll. Changing the width back to "wrap_content" and it works fine but does not look correct (5 or 6 buttons on the screen).
My xml code is below. This is just an extract - there are many more layouts/views on the screen.
I will be wanting to programmatically specify the width later the double the phone's screen size didn't want to move on to that until I worked out why the above isn't working.
I have included that code if anyone wants to lend a hand, but it is NOT related to the above non-scrolling problem.
Thanks in advance for any help you can give. Much appreciated.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:orientation="vertical"
tools:context="com.example.testScroll.MainActivity"
tools:ignore="MergeRootFrame" >
<HorizontalScrollView
android:id="#+id/topline_Buttons"
android:layout_width="770dp"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:orientation="horizontal" >
<Button
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_1" />
<Button
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_2" />
<Button
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_3" />
<Button
android:id="#+id/button_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_4" />
<Button
android:id="#+id/button_5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_5" />
<Button
android:id="#+id/button_6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_6" />
<Button
android:id="#+id/button_7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_7" />
<Button
android:id="#+id/button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_weight="1"
android:text="#string/button_8" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
Here is what I have found on SO HERE to programmatically set the width. ALthough I haven't got it working yet
//Set HorizontalScrollView double screen width
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(metrics.widthPixels*2, LayoutParams.MATCH_PARENT);
LinearLayout topline_Buttons = (LinearLayout) findViewById(R.id.topline_Buttons);
topline_Buttons.setLayoutParams(params);
I think trying to increase the size of the scroll view is the wrong way to approach this. If you want the layout that the scroll view wraps to be larger, then change the height of the layout.
Remember that the buttons are in the LinearLayout, and that is currently set to wrap content, so it will only take the space needed to display its children (the buttons).
Try this (with the rest of your code of course):
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/topline_Buttons"
android:layout_width="770dp"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:orientation="horizontal" >
// try this way,hope this will help you..
Note : if fix HorizontalScrollView layout_width then it's not Scrollable so you have gave layout_width "wrap_content"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:orientation="vertical">
<HorizontalScrollView
android:id="#+id/topline_Buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_1" />
<Button
android:id="#+id/button_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_2" />
<Button
android:id="#+id/button_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_3" />
<Button
android:id="#+id/button_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_4" />
<Button
android:id="#+id/button_5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_5" />
<Button
android:id="#+id/button_6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_6" />
<Button
android:id="#+id/button_7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_7" />
<Button
android:id="#+id/button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="button_8" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
**Also remove this peace of code from Activity**
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(metrics.widthPixels*2, LinearLayout.LayoutParams.MATCH_PARENT);
topline_Buttons.setLayoutParams(params);
Ok I've worked it out! Or at least one way of doing it...
If there is a better way let me know.
Instead of specifying the width of the LinearLayout or HorizontalScrollView I needed to specify the width of the buttons inside to 1/4th of the screensize. The HorizontalScrollView should fill the whole page, the LinearLayout wrap content and so the buttons make enough space for themselves.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:orientation="vertical">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:orientation="horizontal" >
<Button
android:id="#+id/button_1"
android:layout_width="92dp" // Specify width here manually
android:layout_height="wrap_content"
android:text="1" />
... etc
That worked but obviously wouldn't look right with many screen sizes, so I specified it programmatically:
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int screenWidth = size.x / 4;
button_1 = (Button)findViewById(R.id.button_1);
button_1.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, LayoutParams.WRAP_CONTENT));
i am having a problem with my imagebutton it does not align right when i specify the centerinparent.
<LinearLayout
android:layout_width="match_parent" android:layout_marginTop="4dp"
android:layout_marginLeft="4dp" android:layout_marginRight="4dp"
android:layout_height="50dp" android:background="#FF0000">
<RelativeLayout android:layout_height="match_parent"
android:layout_width="40dp" android:background="#0000FF">
<ImageView android:id="#+id/imgType"
android:layout_centerInParent="true" android:layout_width="wrap_content"
android:src="#drawable/type_text" android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent" android:layout_weight="1">
<LinearLayout android:orientation="vertical"
android:layout_height="match_parent" android:layout_width="match_parent">
<TextView android:layout_width="match_parent"
android:textColor="#686a68" android:layout_height="match_parent"
android:textSize="15dp" android:text="Manifest : Text"
android:ellipsize="end" android:singleLine="true"
android:layout_weight="1" />
<TextView android:layout_width="match_parent"
android:textColor="#686a68" android:layout_height="match_parent"
android:textSize="15dp" android:id="#+id/txtTitle" android:text="[TEXT NAME]"
android:layout_weight="1" android:singleLine="true"
android:ellipsize="end" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout android:layout_height="match_parent"
android:layout_width="60dp" android:background="#00FF00">
<ImageButton android:src="#drawable/type_text"
android:layout_height="48dp" android:layout_centerInParent="true"
android:layout_width="48dp" android:id="#+id/butEdit" />
</RelativeLayout>
</LinearLayout>
image
As you can see the vertical alignment of the imagebutton is not right.
why is it doing this.
Have you tried running this on the emulator and using the hierarchyviewer tool (in the "tools" folder of the SDK. Click on your app in the list and select "Load View Hierarchy" ) to inspect the elements in question? Have a look at the margins and padding of both the problem control & its container. Also look at the widths of the various components and it may give you a clue as to where the problem is occurring.
Also check that your drawable in #drawable/type_text does not contain any space around it which could be causing a perceived offset (unlikely, I think).
I have occasionally seen odd problems scaling images, so if #drawable/type_text is not 48x48 pixels, try manually scaling the image to the desired size in Photoshop / GIMP / PSP and see if that makes a difference.
Alternatively try using gravity to try to centre your control:
<LinearLayout android:layout_height="match_parent" android:gravity="center"
android:layout_width="60dp" android:background="#00FF00">
<ImageButton android:src="#drawable/type_text"
android:layout_height="48dp"
android:layout_width="48dp" android:id="#+id/butEdit" />
</LinearLayout>
Or maybe:
<LinearLayout android:layout_height="match_parent" android:gravity="center"
android:layout_width="wrap_content" android:background="#00FF00">
<ImageButton android:src="#drawable/type_text"
android:layout_height="48dp" android:layout_width="48dp"
android:layout_margin="12dp" android:id="#+id/butEdit" />
</LinearLayout>
If all else fails, try tweaking the individual android:layout_margin* attributes of the ImageButton to try and force things.
I hope that some of this helps.