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.
Related
I have an image with a textview on top of it. I am wondering how I can blur the background of my textview (only part of the image) to make it more readable. I have tried looking at the Blurry library but it seems like it can only blur the whole picture.
Add this custom BlurView solution: https://github.com/mmin18/RealtimeBlurView
Then put your BlurView positioned behind the TextView in your layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<com.github.mmin18.widget.RealtimeBlurView
android:id="#+id/textview_blurview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/my_textview"
android:layout_alignBottom="#+id/my_textview"
android:layout_alignStart="#+id/my_textview"
android:layout_alignLeft="#+id/my_textview"
android:layout_alignEnd="#+id/my_textview"
android:layout_alignRight="#+id/my_textview"/>
<TextView
android:id="#+id/my_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text in front of blur view"/>
</RelativeLayout>
Finally, set the blur and color as desired in code
blurView.setBlurRadius(80.0f);
blurView.setOverlayColor(R.color.background_blur_color);
You can use frame layout to produce a blur effect , frame layout allows to align views along z-axis the last child appears above all other children, example of usage:-
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView android:layout_width="match_parent"
android:layout_gravity="top"
android:layout_height="200dp"/>
<TextView
android:layout_width="match_parent"
android:background="#10000000"
android:layout_gravity="bottom"
android:layout_height="100dp" />
<TextView
android:layout_width="wrap_content"
android:text="Text Here"
android:layout_marginBottom="50dp"
android:layout_gravity="bottom|center_horizontal"
android:layout_height="wrap_content" />
</FrameLayout>
You can also set the textview background to some color (#AARRGGBB) with lower aplha (AA < "FF" ->max alpha) to reproduce a similar effect easily.
As you want to make your textview more readable as it sits over the imageview. To do this instead of blurring image why don't you use gradient drawable or color.
I had same requirement in my app and I simply went with placing grading view over the part of ImageView.
Let's do this
Step 1: Create a gradient shape and put it under drawable folder, let say shape name is gradient_overlay.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#00000000"
android:startColor="#BB000000"/>
</shape>
Step 2: Create a dummy view and place this over the ImageView or part of ImageView.
<View
android:id="+#id/gradientView"
android:layout_width="match_parent"
android:layout_height="60dp" // adjust the height
android:layout_alignBottom="#id/picture" // give the id of your image
android:background="#drawable/gradient_overlay">
</View>
Step 3: Then align your textview over the gradientView. so that text become proper visible.
I am absolutly a beginner in Android development and I have some problem positioning an image into an ImageView element of my layout. So I have the following situation, I have this fragment layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Dummy content. -->
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="0dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:scaleType="fitCenter"
android:layout_height="350dp"
android:src="#drawable/carbonara"/>
<!--android:background="#drawable/carbonara" />-->
<TextView android:id="#android:id/text1"
style="?android:textAppearanceLarge"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp" />
</LinearLayout>
</ScrollView>
So, as you can see in the previous code snippet I am setting a background image into an ImageView having an height of 350dp setted.
The problem is that the image height is less that 350dp and this is what I am obtaining:
As you can see in the previous screenshot what I obtain is that I have the 350dp ImageView (highlighted in blue) and the image is setted inside it vertically centered. I don't want that the setted image is vertically centerd but I want that it start at the top of the ImageView.
How can I implement this behavior? What am I missing?
I have tryed to change:
android:src="#drawable/carbonara"/>
with:
android:background="#drawable/carbonara" />
and in this way it fills all the ImageView space but in this way the image could appear deformed so I think that it is not a good solution.
try to change in your layout and test again.
android:scaleType="fitCenter"
to
android:scaleType="fitStart"
See full docs here
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.
I tried all afternoon to get the minHeight attribute to work.
What I want is the linearMe layout to:
Stretch from the bottom of the screen to the bottom of the ListView when the ListView has just a few elements.
I need to be able to fill the linearMe layout with a picture for example.
As the ListView gets bigger I want the linearMe layout to:
Have a fixed height (while being at the bottom of the screen) and the ListView to allow scrolling.
My problem is that the the linearMe layout is smaller and smaller as there is more elements in the ListView. And when there is enough element for the listView to fill the screen, the linearMe layout is just gone. It looks like the minHeight is useless in this case.
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/linearMe"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FF0000"
android:minHeight="200dp" />
</LinearLayout>
I hope you can help me out ! :)
Add android:layout_weight="1" to the ListView as well.
Change them both (list & linearMe) android:layout_height attribute to "match_parent"
Remove `minHeight.
That way each View will take half of the screen.`
You might want to try your spacer layout using "View" instead of "LinearLayout". The ViewGroup classes sometimes handle layouts slightly differently.
If you are willing to use ConstraintLayout as the parent container, the following xml should serve your purpose:
<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">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/linearMe"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#android:layout/list_content" />
<LinearLayout
android:id="#+id/linearMe"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#FF0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/list"
app:layout_constraintHeight_min="200dp"
android:orientation="vertical"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
What I've done is that I've defined constraints to chain both list and linearMe with each other. app:layout_constraintHeight_min="200dp" will ensure minimum height of 200dp for linearMe. app:layout_constrainedHeight="true" makes sure that when list has more items, it doesn't hide behind linearMe.
I couldn't test it with some data to fill the ListView. You can just try it out and post your feedback here.
Please have a look at the following XML layout
<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"
>
<TextView
android:id="#+id/lblPassword"
android:text="#string/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/pwdText"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:inputType="textPassword"
/>
<Button
android:text="#string/btnLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showMessage"
/>
</LinearLayout>
This generates the following gui (attached)
As you can see, the textbox height is unexpectedly too much. Actually what I need is adjusting textbox width to fit to the app properly, providing enough space to type (if I didn't do anything, the textbox appears very small in width). I am new to android. Please help!
To expand the width to match the width of the device replace android:layout_width="wrap_content" with android:layout_width="match_parent", or you can specify a width in dp.
By setting the attributes android:layout_height="0dp" and android:layout_weight="1" you are saying you want this elements height to fill all the remaining space on the screen.
Does it fix the issue when u remove this line android:layout_height="0dp"
edit: or change it to android:layout_height="wrap_content"
change your EditText to this
<EditText
android:id="#+id/pwdText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="textPassword"
/>
Do not use "match_parent" attribute for either width or height for your outermost layout. Use either wrap_content or fill_parent. Also replace 0dp in the layout_height for the editText with wrap_content.
For the text View height change it from wrap content to 10 dp.