How to Split My 800X480 5-Inch Screen into 2 Parts

Android Things: Set screen resolution

The original answer was found HERE, and my saviour gave his answer HERE

Create a mounting position:

mkdir ~/mnt/sd

Mount the sd card:

sudo mount -t msdos /dev/disk2s1 ~/mnt/sd

Make changes to the config.txt, in my case:

max_usb_current=1
hdmi_group=2
hdmi_mode=87
hdmi_cvt 800 480 60 6 0 0 0

To unmount:

sudo umount ~/mnt/sd/

how to split entire screen into parts of various sizes in react native

You should use Flexbox.

<View style={{flex: 1}}>
    <View style={{flex: 1}}></View>
    <View style={{flex: 1}}></View>
    <View style={{flex: 1}}></View>
</View>

How to Divide screen into 4 equal part using Grid layout in android?

Starting API 21 you can use weights in GridLayout:

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="2">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:background="@drawable/rectangle"/>

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:background="@drawable/rectangle"/>

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:background="@drawable/rectangle" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:background="@drawable/rectangle" />

</GridLayout>

Use android.support.v7.widget.GridLayout if you need to support previous apis

react native flexbox split screen

Uhm, so I kind of know what I am doing in React Native now, after over a year of learning.

<View style={{ flex: 1 }}>
  <View style={{ backgroundColor: 'gray', flex: 1 }} />

  <View style={{ flex: 1 }}>
    <Swiper>
      <View
        style={{
          alignItems: 'center',
          backgroundColor: 'red',
          justifyContent: 'center',
          height: Dimensions.get('window').height / 2
        }}>
        <Text style={{ color: 'white' }}>Test</Text>
      </View>
      <View
        style={{
          alignItems: 'center',
          backgroundColor: 'green',
          justifyContent: 'center',
          height: Dimensions.get('window').height / 2
        }}>
        <Text style={{ color: 'white' }}>Test</Text>
      </View>
      <View
        style={{
          alignItems: 'center',
          backgroundColor: 'blue',
          justifyContent: 'center',
          height: Dimensions.get('window').height / 2
        }}>
        <Text style={{ color: 'white' }}>Test</Text>
      </View>
    </Swiper>
  </View>
</View>

Vertically split half of the screen with Bootstrap - 4 to display the image till the edge of the screen

Problem solved. please check the Codepen link above or here. link

HTML

<h1 class="text-center">Split half width Background iamge <br>till edge of the screen.</h1>
<section>
  <div class="img-wrapper"></div>
  <div class="container">
    <div class="row">
      <div class="offset-sm-6 col-sm-6">
        <div class="text-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit iusto adipisci, perspiciatis quo animi vel eum dicta id ut asperiores, consequuntur nostrum tenetur sapiente. Neque incidunt ullam minima eius repudiandae, atque deleniti! Pariatur ea doloremque ex optio ducimus dicta alias!</p>
          <p>Id quot maiestatis vix. Putent virtute iracundia no duo. Eum debitis qualisque deseruisse ei, te nec omnis verear virtute. Te recusabo explicari deterruisset vim. Eu perfecto consequuntur mel, ex mea blandit verterem temporibus. Mei tota definiebas ne</p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="text-center">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>The End</h2>
            </div>
        </div>
    </div>
</section>

CSS

h1{
  margin:20px;
  font-weight:bold;
}
section{
  padding:30px 0;
  position:relative;
  margin-bottom:80px;
  overflow:hidden;
}
div.img-wrapper{
  background-image: url("https://images.pexels.com/photos/1229846/pexels-photo-1229846.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
    min-height: 100%;
    background-position: center;
    background-size: cover;
    position: absolute;
/*   change the left side image width as like you want */
    width: 41.66667%;
    left: 0;
}
p{
  padding: 20px;
}

What I did here, are

1. I have put a div right before the class .container and made it position:absolute;

2. But before that the wrapping section was made position:relative;

3. Set it with a desired width, in this case a width of Bootstrap .col-5 = 41.666667%;

These are main key points, rest you can design as you like.

@mahan See the image bellow, in your case the background image is not cover the whole space esp it should occupy the whole screen and start immediately from the left side of the content.

@david-liang I am sorry if my words have filed to describe what it is. But in your case the image is covering the whole area, however it seems the image is partially seen.

Well, We may leave the rest for the visitors to decide which one is correct.

Here the compared image in all cases how it looks.

• Cheers!

---

Related Topics