Twitter app launcher with react native navigation

I was so excited when i saw a DEV community built by Nigerians. A brief intro of me, I am a developer and a YouTube content creator. I started my journey far back when we were able to use Waptrick to download games and creating an amateur website with wapka.mobi Seeing this dev community is perfect unlike dev.to, I pray we continue to make an impact and tell the world that Nigerians can strife without the internet fraud and acts. Amen.

My first tutorial on this community, super excited, I am a lover of making android apps, so i will be dropping as many tutorials as i am able to. But for this we are going to be creating an android app-launcher splash screen with wix react native navigation, i would as well drop a link to the GitHub repo and also the YouTube tutorial once it is ready so that you can be able to have more understanding when you see them.

I suggest you have a basic foundational knowledge on how to use Java or react-native

Link to generate app-launcher icons

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0.05&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(68%2C%20138%2C%20255)&crop=0&backgroundShape=square&effects=elevate&name=ic_launcher

Check the Github Repo for the design files

  • Move the generated icons to

    android\app\src\main\res

  • Create a drawable folder

    android\app\src\main\res\drawable

  • Create a launch_screen.xml file

    android\app\src\main\res\drawable\launch_screen.xml

  • Paste this inside the launch_screen.xml file

<layer-list

xmlns:android=“http://schemas.android.com/apk/res/android
android:opacity=“opaque”>

    <item android:drawable="@color/splashBackground"/> 

    <item>
        <bitmap
            android:src="@drawable/ic_launcher.png"
            android:gravity="center"
            android:width="170dp"
            android:height="122dp"
            />
    </item>
    </layer-list>
  • Go to this MainActivity.java

    android\app\src\main\java\com\applauncher\MainApplication.java

  • Paste this line of code inside item

    @Override

      protected void onCreate(Bundle savedInstanceState) {
    
          super.onCreate(savedInstanceState);
    
          setContentView(this.createSplashLayout());
    
      }
    
      public LinearLayout createSplashLayout() {
    
          LinearLayout splash = new LinearLayout(this);
    
          Drawable launch_screen_bitmap = ContextCompat.getDrawable(getApplicationContext(), R.drawable.launch_screen);
    
          splash.setBackground(launch_screen_bitmap);
    
          return splash;
    
      }
    
  • One more thing we can as well do is to add a background color for our splash screen, the default is white.

from the first step you can observe this line of code

` <item android:drawable="@color/splashBackground"/>`
  • all you have to do is go to this folder

      android\app\src\main\res\values, create a file named colors.xml
    
      android\app\src\main\res\values\colors.xml
    

Start Or install your app again

Bonus: If you want to get rid of the white screen which always appear when the app is about to navigate or start Check it on my personal webisite

I hope admins can allow me next time to add option tags regarding every tutorial i drop :slight_smile:

Thank you.

3 Likes