Resizing Image Buttons and Image Views on a XML Page - java

So I have this XML layout page, but when i put it on a bigger screen nothing resizes, i was wondering how this would be done. Can it be done through the XML or Java, or both?
This is my layout 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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainPage"
android:background="#drawable/appbackground3"
android:id="#+id/HomeLayout">
<ImageButton
android:layout_width="120dp"
android:layout_height="120dp"
android:id="#+id/PlayBtn"
android:background="#drawable/mybutton2"
android:src="#drawable/playbutton"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="500dp"
android:layout_height="120dp"
android:id="#+id/TitleImg"
android:background="#drawable/title"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />

I believe it is because you are already setting the height and width of the images. What do you expect the system will do? I would rather use wrap_content, match_parent, Fill_parent depending what you want the UI to look like. That way your app will behave differently in every layout and screen sizes. I highly recommend you look into fragments, as they will give you much more flexibility.

Related

What is the right way to use two scrollviews in a single activity?

This is my current design in my main activity.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txtSubestacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Subestacion"
android:textSize="18sp" />
<Spinner
android:id="#+id/spSubestacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dropdown" />
<TextView
android:id="#+id/txtClasificacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Clasificacion"
android:textSize="18sp" />
<Spinner
android:id="#+id/spClasificacion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spinnerMode="dropdown" />
<ScrollView
android:id="#+id/scrollEventos"
android:layout_width="match_parent"
android:layout_height="350dp"
android:paddingTop="30dp"
android:paddingBottom="10dp">
<LinearLayout
android:id="#+id/linearEventos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<Button
android:id="#+id/btnRegistros"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Actualizar Registros" />
</LinearLayout>
</ScrollView>
I have a second scrollview inside the first one because this one is filled with multiple labels created from code. These labels can take up a lot of space, so a scrollview is suitable for proper navigation.
The first scrollview that contains everything is so that when changing the screen in landscape mode, you can continue browsing and access all the controls that are displayed.
The problem is that when changing the screen in landscape mode, only the first scrollview works, which allows you to see all the controls correctly. However, the second scrollview showing the records cannot be moved, and therefore the records are cut.
Is there a way to freeze the first scrollview when the user wants to slide the records and allow the second scrollview to be moved?
Or is it that I should create my design differently?
Note: Everything works correctly with the screen in portrait mode. All the controls are accessible at first instance and the second scrollview can be slid correctly allowing to see the records.
I've tried working with the layout_weight property but it didn't work for me or I just didn't know how to use it.
Use this:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- Other Layout or scrollView-->
</android.support.v4.widget.NestedScrollView>
Android site: NestedScroll

Android button layout adapting to screen size

I am new in Android development.I created a simple project with a simple button.I thought that the
button will look the same on different screen sizes but when i previewed all screens eclipse displayed this
http://imgur.com/kjEMhHx
This is the xml 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.businessideas.MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="116dp"
android:text="Button" />
</RelativeLayout>
Can you please help me and tell me how can i design that button look the same on all screen sizes?
Thanks
You'll need to use the weight attribute when the button's parent is LinearLayout. That way it will force the button to have a size proportional to the screens width:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_marginTop="116dp"
android:text="Button"
android:layout_weight="2"
android:layout_width="0dp"/>
</LinearLayout>
Notice that if the LinearLayout's orientation is horizontal, width will be adjusted by android (implicitly) therefore the children have width of 0dp.
Also note that now the button will take 20% (2/10) of the LinearLayout's (the parent's) width.
On the button part change:
android:layout_width="20dp"
android:layout_height="20dp"
Use specific DP sizes to keep items the same physical size on different screen (replace 20 with your desired size).
If you want your button to be of the same size in all different screen than you have to manually give the DP size.
like
andoird:layout_width = "20dp"
android:layout_height = "20dp"
You can also place your button at specific location by changing your relative layout to linear layout.

How to set specific height at run time for Sliding layout?

I am building an app that uses this library:https://github.com/umano/AndroidSlidingUpPanel to create a panel that slides on from the bottom of the screen when a user clicks an item in a listview.
However i dont want the slide up panel to take up the entire screen. I need there to be a gap at the top, between the panel and the action bar, of exactly 80dp.
I have tried everything i can think of (putting a spacer there with a transparant background, using layoutParams (gives error), etc). But nothing seems to work.
If someone could give me some suggestions as to what i could try next, i would much appreciate it.
The xml layouts are below.
Thanks for your time.
Corey
<com.bacon.corey.audiotimeshift.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="68dp"
sothree:shadowHeight="4dp"
sothree:overlay="true">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="4dip"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="4dip"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
<com.bacon.corey.audiotimeshift.FloatingActionButton
android:id="#+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
app:colour="#color/holo_red_light"
app:drawable="#drawable/ic_content_new"
/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:textSize="16sp"
android:id="#+id/slideUpPanel"
android:background="#android:color/transparent"
>
<fragment android:name="com.bacon.corey.audiotimeshift.PlayFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_play"
/>
</FrameLayout>
</com.bacon.corey.audiotimeshift.SlidingUpPanelLayout>
What about wrapping your SlidingUpPanelLayout in another layout, say FrameLayout and adding some good old paddingTop to the latter?
I have found a workaround. Draw the background of the pane transparent and put a padding top, but first the library must be modified like it's written here:
https://github.com/umano/AndroidSlidingUpPanel/issues/4
Hope this helps somebody in the future :)

how to hide and show custom view in android development?

I have two view class that only contains drawing. I want to change the view class from one class to another just by tap the 'door' (on specific coordinates).
Here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<com.example.insidehouse.InsideHouseView
android:id="#+id/insideHouseView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" />
<com.example.insidehouse.BedRoomView
android:id="#+id/bedRoomView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_centerVertical="false" />
</RelativeLayout>
Try using a ViewSwitcher. http://developer.android.com/reference/android/widget/ViewSwitcher.html
You can surround your two views with a viewswitcher and have Android smoothly switch between views. You can even use animations to give your user more eye candy
You can hide a view by setting its visibility to VIEW.GONE.
Add a onClickListener in the view and use setVisibility to show/hide the door/bedroom
to go in (onClickListener of the door):
insideHouseView1.setVisibility(View.GONE);
bedRoomView1.setVisibility(View.VISIBLE);
to go out (onClickListener of the door of the bed?):
insideHouseView1.setVisibility(View.VISIBLE);
bedRoomView1.setVisibility(View.GONE);
There are other views which allows you to switch between views, but i never tried it.. ViewFlipper maybe.

Alignment issue in Android EditText

Please have a look at the following code
<ScrollView 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=".Form" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/heightLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/height"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/heightLabel"
android:layout_marginLeft="5dp"
android:hint=""
/>
</RelativeLayout>
</ScrollView>
I need this EditText to be displayed right next to the TextView, with it's appropriate size. But instead, it is displaying in no where. I don't even see it! Please help!
You are using wrap_content but no default text. So if the EditText is visible, it will be quite small. You need to define an appropriate size yourself. Try using match_parent as the width or adding an attribute like minWidth or ems.

Categories