How to achieve evenly spaced layout - java

My current layout looks the following:
MY XML layout looks like:
<?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" >
<TextView
android:id="#+id/tvLetter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="3"
android:text=""
android:gravity="center"
android:textSize="#dimen/letter_size"
android:textColor="#FFFFFF"
android:background="#drawable/bd" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="1" >
<Button
android:id="#+id/colorButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:background ="#drawable/colors"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/soundButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:background="#drawable/sound" />
<Button
android:id="#+id/eraserButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/eraser" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="2" >
<ImageView
android:id="#+id/ivIcon"
android:layout_width="#dimen/letter_icon"
android:layout_height="#dimen/letter_icon"
android:scaleType="fitXY"
android:layout_alignParentLeft="true"
android:background="#drawable/zebra" />
<LinearLayout
android:id="#+id/actionHolder"
android:layout_toRightOf="#+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/wordSound"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:background="#drawable/sound" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
My #dimen/letter_icon is being used for different sizes based on the screen size. I am trying to make it compatible with both phone and tablet (different size screen). How do I achieve the following in my layout:
Let's say the ZEBRA text is inside a textview and the sound is in a button.
I am thinking the bottom ImageView has to be inside another layout, linearleayout maybe? and take up 3/4 of the space of the screen width.

Put your ZEBRA and SPEAKER buttons in vertical LinearLayout. Set buttons' height to match_parent and layout_weight to 1 and you should have what you want
and if you want to distribute width among your buttons' container and ImageView, set them width to match_parent and play with layout_weight there.

Related

ANDROID STUDIO- layout background (image) doesn't show

everyone, first of all, I'm with a problem in my android project. I set an image as a layout background with the appropriate width (5.5), and when I run the application it appears white background instead of the intended image. The image is in at the drawable folder, all normal.
The image has the same dimensions of the layout (5.5)
Code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#drawable/fundo"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="200dp"
app:srcCompat="#drawable/logo_branco" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="450dp"
android:fontFamily="#font/advent_pro_thin"
android:text="O automóvel ideal para si!"
android:textColor="#E76C00"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
If you want to load a whole image, I'd use the approach of having an ImageView at the root ViewGroup of the layout with both dimensions set to match_parent.
This will solve the issue of the image not loading with an added benefit of being able to define scale type (like centerCrop) which enables you to have a picture with any side ratio and be sure it'll fill the screen both vertically and horizontally.
Edit:
Proposed solution:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context=".MainActivity">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/fundo" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="200dp"
app:srcCompat="#drawable/logo_branco" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="450dp"
android:fontFamily="#font/advent_pro_thin"
android:text="O automóvel ideal para si!"
android:textColor="#E76C00"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>

Merging Multiple TextViews onto a Bitmap - should i use canvas?

I have found that you can add or merge textviews onto a bitmap. I have 4 textviews that I would like to merge onto the top of the image.
Here is a screenshot of what I would like to achieve (although at the minute this is textviews at the top separate to the image):
the image is below the textviews. Image header in top right is for what image No it is
So what I am trying to do is once I click the send button it "prints" or merges these Textviews onto the image bitmap below so that I can then save or send the image(with the textviews in it) as one file to my server/device.
So far I have used Canvas.draw() method although it seems to overwrite each other and I am trying to keep the same layout as the screenshot.
Can anyone help?
Try this...
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomLayID"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:padding="8dp"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Detail work order"
android:textStyle="bold"
android:gravity="center"
android:layout_weight="0.5"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Image"
android:textStyle="bold"
android:gravity="center"
android:layout_weight="1.5"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:padding="8dp"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:layout_weight="0.5"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:layout_weight="1.5"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/bottomLayID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Open Camera"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Send Image"
android:background="#99d72e"/>
</LinearLayout>
</RelativeLayout>
Give background as transparent color and border to textviews.
You can set bitmap to imageview by
ImageView mImg;
mImg = (ImageView) findViewById(R.id.(your xml img id));
mImg.setImageBitmap(img);

how to make a fixed portion of scroll activity to display on every screen sizes

How can I make a fixed portion of a scroll activity display on every screen size?
I have a scrollable activity which contains a pageviewer, and below that, 4 buttons. On an average screen it just displays only these things, the rest comes below the screen, which means there are few more views below the button. If we use a wider screen, then these views also appear in main view before scrolling. I need to make the view range the same for all screen sizes, meaning for wider screen also, I need to just view the pageviewer and buttons only, the rest should be seen only when we scroll.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/idd_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="500dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Button1" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="other view" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="other view" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="other view" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="other view" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="other view" />
</LinearLayout>
</ScrollView>
</LinearLayout>
set ViewPager height programatically so it can match mobile height

Stretch gridview to full screen

My gridview consists of 7 lines. Each cell contains a small image and text. How can I stretch this gridview with 7 lines on the full screen?
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#android:color/transparent"
android:numColumns="7"
android:stretchMode="columnWidth" >
</GridView>
For cell:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
</TextView>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:src="#drawable/image" />
</LinearLayout>
When I run this, I can achieve stretching of each column by setting an explicit height on the `GridView.
If you want this to be dynamic, I'd suggest setting an explicit height programatically.

Splitting Android Layout Vertically Adding Gravity To Both Sides To Center Objects

I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?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:background="#drawable/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.
Here's some code which should be self-explanotory:
<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="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:

Categories