We Keep Coding

How to make a grid where each attribute is a textview underneath another textview

I'm trying to create a 4*n grid where each attribute within the grid has a textView saying "1" then directly underneath that text view saying "One"
e.g.
<?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"
android:paddingTop="8dp"
android:paddingBottom="8dp">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:rowCount="2">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"
android:textSize="32sp" />
</GridLayout>
This just provides each text view next to each other in a grid.
Any help would be greatly appreciated.
Thank you.

you should create your row layout file like this,
<?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"
android:paddingTop="8dp"
android:paddingBottom="8dp">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"
android:textSize="32sp" />
</LinearLayout>
inflate this row file in the adapter and set the not of items in each row for grid to 4.
one suggestion - user recyclerview with GridLayoutManager instead of GridLayout.

how to get a portion of a view outside of its parent?

I tried to create an actionBar like this one, "this is a website template "
so I created a file action_bar.xml which I'll inflate, A RelativeLayout which has a height of wrap_content & a width of match_parent , it has the gear icon and all other details except that I can't get a part of the round picture outside of the RelativeLayout like the picture.
I tried using margins but it doesn't get out of the RelativeLayout, The RelativeLayout gets extended instead. so, More margin in the picture results in more height in RelativeLayout.
Any suggestions?
<?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="wrap_content">
<ImageButton android:src="#drawable/roundPicture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/gearICON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
No Libraries please, I'm not making an app, I'm just trying to understand.
quick recap. I want a part of the first ImageButton outside of the RelativeLayout

Check if it is this what you are looking for
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ImageButton
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>

First, I ran into a problem that my data appears under the ImageView, not behind it
but I fixed it by adding my data which is a listview, after the relativeLayout in the frameLayout, Thanks P.Juni for the idea btw
The XML which runs totally fine is
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<ImageButton android:id="#+id/imageButton"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="60sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>

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);

LinearLayout: 3 Elements, Top, Center, Bottom

I've the following xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/topFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="#+id/imageViewTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_00" />
<TextView
android:id="#+id/textViewTest"
android:layout_below="#+id/imageViewTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is a Test"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/bottomFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal" />
</LinearLayout>
The first FrameLayout contains a fragment, which contains some buttons.
The RelativeLayout contains for example an image (changig size) and a text.
The last FrameLayout contains also a fragment, which contains either some buttons or some text or an image.
My aim is, that:
- the first FrameLayout is on top (that works)
- the elements in the RelativeLayout are centered in the middle of the screen (doesn't work)
- the last FrameLayout is on the bottom (doesn't work)
It should look like this:
My previous attempts with android:gravity="center" in the RelativeLayout and android:layout_gravity="bottom|center_horizontal" for the second FrameLayout failed.

Change the LineareLayout to Relative and use layout_centerInParent for the middle layout and alignParentBottom for the last one.
The top View will be anchored to the top by default
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"> //removed orientation as it won't be needed anymore
<FrameLayout
android:id="#+id/topFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="wrap_content" // change here
android:layout_height="wrap_content"
android:layout_centernInParent="true"> // here
<ImageView
android:id="#+id/imageViewTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_00" />
<TextView
android:id="#+id/textViewTest"
android:layout_below="#+id/imageViewTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is a Test"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/bottomFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" /> //here
</RelativeLayout>

Use relative layout and use android:layout_centerHorizontal="true" instead of gravity.
EDIT
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/topFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/topFragment">
<ImageView
android:id="#+id/imageViewTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_00"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/textViewTest"
android:layout_below="#+id/imageViewTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is a Test"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<FrameLayout
android:id="#+id/bottomFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>

android: image in icon not showing

I'm trying to place a banner at the top of a listview, one that stays there when the list scrolls down. The layout I currently have actually show what I want in the preview but when I run it in the emulator the only thing that appears is the list.
The XML is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:src="#drawable/edinburghcrest"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/EdUniCrest" android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"></ImageView>
<TextView android:layout_height="wrap_content" android:id="#+id/banner"
android:text="Hotels Nearby" android:textColor="#FFFFFF"
android:gravity="center" android:textSize="20dp" android:layout_width="wrap_content"
android:layout_alignParentTop="true" android:layout_toRightOf="#+id/EdUniCrest"
android:layout_alignParentRight="true" android:layout_alignBottom="#+id/EdUniCrest"
android:background="#25476C"></TextView>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#color/listcolor" android:orientation="vertical" android:layout_marginTop="50dp">
<ListView android:id="#android:id/list" android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ListView>
<TextView android:id="#android:id/empty" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/no_lunchs" />
</LinearLayout>
Anyway, I can't see why it isn't working. Does anyone have any idea what it might be?
Thanks.

The RelativeLayout here just makes it confusing. You can achieve this simply with a couple of LinearLayouts. Wrap your banner in a horizontal layout with a height=wrap_content and set you ListView to height=fill_parent. The list will then fill all available space. The List will scroll independently of the rest of the page.
Something like below should work:
<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:orientation="horizontal" android:id="#+id/bannerBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:src="#drawable/edinburghcrest"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/EdUniCrest"/>
<TextView android:layout_height="wrap_content" android:id="#+id/banner"
android:text="Hotels Nearby" android:textColor="#FFFFFF"
android:gravity="center" android:textSize="20dp" android:layout_width="wrap_content"
android:background="#25476C"/>
</LinearLayout>
<ListView android:id="#android:id/list" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TextView android:id="#android:id/empty" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="#string/no_lunchs" />
</LinearLayout>

What if you wrapped your RelativeLayout in a ScrollView, and since a ScrollView can only have one child, put the banner above it?